<template>
    <div class="mainContent boxWrapper">
        <div>
             <el-select v-model="currentSelect" placeholder="请选择" size="small" @change="handleChangeSelect">
                <el-option
                v-for="item in options"
                :key="item.tp"
                :label="item.name"
                :value="item.tp">
                </el-option>
            </el-select>
        </div>
        <div style="margin-top:10px;display: grid;">
             <noData v-if="tableList.length == 0" showData style="height:calc(100vh - 200px)"></noData>
            <el-table id="oIncomTable" :data="tableList" border stripe  height="calc(100vh - 200px)" v-show="tableList.length > 0 ">
                <el-table-column align="center" label="编号" type="index" width="60"/>
                <el-table-column align="center" label="名称" prop="name" width="140"/>
                <el-table-column align="center" label="操作员" prop="userName" width="140">
                    <template slot-scope="scope">
                        <i class="iconfont blueText" style="font-size: 20px;">&#xeb54;</i>
                        <span>{{scope.row.userName}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作时间" prop="dt" width="200">
                    <template slot-scope="scope">
                        <i class="iconfont blueText" style="margin-right:8px">&#xe7ec;</i>
                        <span>{{scope.row.dt}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作内容" prop="text"/>
            </el-table>
           
        </div>
    </div>
</template>

<script>
import {SysLog,SysLogMenu} from '../../api/https'
import bus from '@/utils/eventBus.js';
import noData from '@/components/base/noData.vue'
 export default ({
    name:'log',
    components: { noData },
    data() {
      return{
        options:[],
        currentSelect:'',
        currentPage:1,
        totalPage:1,
        tableList:[],
        isLoading: false,
        isEnd: false    
      }
    },
    created(){
        bus.$emit('showBasin',false)
        this.getLogSelect()
    },
    mounted() {
        const tableBodyWrapper = this.$el.querySelector('.el-table__body-wrapper');
        if (tableBodyWrapper) {
            tableBodyWrapper.addEventListener('scroll', this.handleScroll);
        }
    },
    beforeDestroy() {
        this.isEnd = false
        this.isLoading = false
        // 组件销毁时移除事件
        const tableBodyWrapper = this.$el.querySelector('.el-table__body-wrapper');
        if (tableBodyWrapper) {
            tableBodyWrapper.removeEventListener('scroll', this.handleScroll);
            this.tableBodyWrapper = null;
        }
    },
    activated(){
        bus.$emit('showBasin',false)
    },
    methods:{
        getLogSelect(){
            SysLogMenu().then(res=>{
                if(res.isSuccess){
                    this.options = res.data || []
                    if(res.data.length > 0){
                        this.currentSelect = res.data[0].tp
                        this.getList()
                    }else{
                        this.currentSelect = ''
                    }
                }else{
                    this.options = []
                    this.currentSelect = ''
                }
            })
        },
        async  getList(){
            if (this.isLoading || this.isEnd) return; 
            this.isLoading = true;

            try {
                const res = await SysLog({
                    pageIndex: this.currentPage,
                    pageSize: 50,
                    tp: this.currentSelect
                });
                
                if (res.isSuccess && res.data && res.data.data) {
                    if (this.currentPage === 1) {
                    this.tableList = res.data.data || [];
                    } else {
                    this.tableList = this.tableList.concat(res.data.data);
                    }
                    this.totalPage = res.data.pageCount || 1;
                    
                    // 判断是否已加载完所有数据
                    if (this.currentPage >= this.totalPage) {
                    this.isEnd = true;
                    } else {
                    this.currentPage++;
                    }
                }
            } catch (error) {
                console.error(error);
            } finally {
                this.isLoading = false;
            }
        },
        handleScroll(event) {
            const { scrollTop, scrollHeight, clientHeight } = event.target;
            const bottom = scrollHeight - scrollTop - clientHeight < 50;
            
            if (bottom && !this.isLoading && !this.isEnd) {
            this.getList();
            }
        },
        handleChangeSelect(val) {
            this.currentSelect = val;
            this.currentPage = 1;
            this.totalPage = 1;
            this.tableList = [];
            this.isEnd = false; 
            this.getList();
        }
    }
})
</script>

<style scoped>
.mainContent{
    height:calc(100vh - 120px);
    box-sizing: border-box;
    padding:20px;
}
</style>